import React from 'react';
import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, Box, Chip } from '@mui/material';
import { useAppSelector } from '../../store/store';
import { Card, GamePhase } from '../../store/gameSlice';
import PlayingCard from './PlayingCard';

interface GameTableProps {
  communityCards: Card[];
  pot: number;
  currentBet: number;
  gamePhase: GamePhase;
  minBet: number;
  bigBlind?: number;
}

const GameTable: React.FC<GameTableProps> = ({
  communityCards,
  pot,
  currentBet,
  gamePhase,
  minBet
}) => {
  const getGamePhaseText = () => {
    switch (gamePhase) {
      case GamePhase.WAITING: return '等待开始';
      case GamePhase.PREFLOP: return '翻牌前';
      case GamePhase.FLOP: return '翻牌';
      case GamePhase.TURN: return '转牌';
      case GamePhase.RIVER: return '河牌';
      case GamePhase.SHOWDOWN: return '摊牌';
      default: return '';
    }
  };

  const getCommunityCardCount = () => {
    switch (gamePhase) {
      case GamePhase.PREFLOP: return 0;
      case GamePhase.FLOP: return 3;
      case GamePhase.TURN: return 4;
      case GamePhase.RIVER: return 5;
      case GamePhase.SHOWDOWN: return 5;
      default: return 0;
    }
  };

  const displayCardCount = getCommunityCardCount();
  const displayCards = communityCards.slice(0, displayCardCount);
  const hiddenCards = Array.from({ length: Math.max(0, displayCardCount - communityCards.length) }, (_, i) => i);

  return (
    <Paper
      elevation={4}
      sx={{
        p: 3,
        backgroundColor: '#2e7d32', // 绿色桌面
        borderRadius: 3,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 2,
        border: '4px solid #8d6e63',
        boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
        position: 'relative',
        overflow: 'hidden'
      }}
    >
      {/* 桌面装饰纹理 */}
      <Box
        sx={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px)',
          backgroundSize: '20px 20px',
          opacity: 0.5,
          pointerEvents: 'none'
        }}
      />

      {/* 游戏阶段 */}
      <Chip
        label={getGamePhaseText()}
        color="primary"
        sx={{ fontWeight: 'bold', zIndex: 1 }}
      />

      {/* 底池和当前下注 */}
      <Box sx={{ display: 'flex', gap: 2, zIndex: 1 }}>
        <Box sx={{ textAlign: 'center' }}>
          <Typography variant="h5" color="white" fontWeight="bold">
            底池
          </Typography>
          <Typography variant="h4" color="yellow" fontWeight="bold">
            ${pot}
          </Typography>
        </Box>
        {currentBet > 0 && (
          <Box sx={{ textAlign: 'center' }}>
            <Typography variant="body2" color="white">
              当前下注
            </Typography>
            <Typography variant="h5" color="orange" fontWeight="bold">
              ${currentBet}
            </Typography>
          </Box>
        )}
      </Box>

      {/* 公共牌区域 */}
      <Box sx={{ zIndex: 1 }}>
        <Typography variant="body2" color="white" sx={{ mb: 1, textAlign: 'center' }}>
          公共牌
        </Typography>
        <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
          {/* 显示的公共牌 */}
          {displayCards.map((card, index) => (
            <PlayingCard
              key={`card-${index}`}
              card={card}
              size="medium"
            />
          ))}
          
          {/* 隐藏的公共牌位置 */}
          {hiddenCards.map((_, index) => (
            <PlayingCard
              key={`hidden-${index}`}
              isHidden={true}
              size="medium"
            />
          ))}
        </Box>
      </Box>

      {/* 最小下注提示 */}
      {gamePhase === GamePhase.WAITING && (
        <Typography variant="body2" color="white" sx={{ zIndex: 1 }}>
          最小下注: ${minBet}
        </Typography>
      )}
    </Paper>
  );
};

export default GameTable;